const CommonTitle = ({
  className,
  style,
  title,
  titledecorate = true,
  extra,
  titleStyle = {},
}) => {
  return (
    <div
      className={className}
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        ...style,
      }}
    >
      <div style={{ background: '#f7f7f7', flex: 1 }}>
        <div
          style={{
            fontWeight: 500,
            display: 'flex',
            alignItems: 'center',
            fontSize: 13,
            padding: '7px 0',
            ...titleStyle,
          }}
        >
          <div style={{ flex: 1, width: 0 ,display: 'flex'}}>
            {titledecorate && (
              <span
                style={{
                  background: '#409eff',
                  padding: '0px 2px',
                }}
              />
            )}
            <span style={{ marginLeft: 10 }}>{title}</span>
          </div>
          <div>{extra}</div>
        </div>
      </div>
    </div>
  );
};

export default CommonTitle;
